<!--
* @author wn
* @date 2022/11/15 11:56:20
* @description: 支付页
!-->
<template>
	<div class="set">
		<el-input
			v-model="input"
			size="large"
			placeholder="请输入内容  一般为后端传入网址"
		/>
		<el-button size="large" type="success" @click="handleClick">
			生成二维码
		</el-button>
	</div>
	<div class="qr-code" ref="QRCodeDom"></div>
</template>
<script setup>
import { ref } from 'vue'
import QRCode from 'qrcodejs2'
import removeBlur from '@/utils/blur'

const QRCodeDom = ref('')
const input = ref('')
const size = '500'
// 点击生成二维码
const handleClick = e => {
	// 清除二维码方法一
	QRCodeDom.value.innerHTML = ''
	/* eslint-disable no-new */
	new QRCode(QRCodeDom.value, {
		text: input.value, // 页面地址 ,如果页面需要参数传递请注意哈希模式#   或者内容
		width: size, // 二维码宽度 （不支持100%）
		height: size, // 二维码高度 （不支持100%）
		colorDark: '#000', // 二维码颜色
		colorLight: '#fff', // 二维码背景颜色
		correctLevel: QRCode.CorrectLevel.H, // 水平位置
	})
	// el-button 点击后 强制失去焦点
	removeBlur(e)
}
</script>
<style scoped lang="scss">
.set {
	width: 300px;
	margin: 50px auto;
	.el-button {
		width: 100%;
		margin-top: 20px;
	}
}
.qr-code {
	width: 500px;
	height: 500px;
	// border: 1px solid;
	margin: 0 auto;
}
</style>
